<template>
  <a-drawer v-model:visible="visible" title="厂商详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
    <fieldset>
      <legend>基础信息</legend>
      <a-descriptions :column="1" size="large" class="general-description">
        <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
        <a-descriptions-item label="地址">{{ dataDetail?.address }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ dataDetail?.description }}</a-descriptions-item>
        <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
        <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
        <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
      </a-descriptions>
    </fieldset>
    <fieldset>
      <legend>联系人</legend>
      <a-space direction="vertical" fill>
        <a-table :data="contactsData" :columns="contactsColumns" :pagination="false" bordered>
          <template #name="{ record, rowIndex }">
            <a-input v-model.trim="record.name"/>
          </template>
          <template #phone="{ record, rowIndex }">
            <a-input v-model.trim="record.phone" />
          </template>
          <template #post="{ record, rowIndex }">
            <a-input v-model.trim="record.post" />
          </template>
        </a-table>
      </a-space>
      <br />
    </fieldset>
  </a-drawer>
</template>

<script setup lang="ts">
  import { useWindowSize } from '@vueuse/core'
  import { type ProducerRecordsDetailResp, getProducerRecords as getDetail } from '@/apis/asset/producer/records'

  const { width } = useWindowSize()
  const dataId = ref('')
  const dataDetail = ref < ProducerRecordsDetailResp > ()
  const visible = ref(false)

  // 联系人
  const contactsData = ref < TableData[] > ([]);

  // 联系人
  const contactsColumns = [
    {
      title: '姓名',
      dataIndex: 'name',
      slotName: 'name'
    },
    {
      title: '电话',
      dataIndex: 'phone',
      slotName: 'phone'
    },
    {
      title: '职位',
      dataIndex: 'post',
      slotName: 'post'
    }
  ];

  // 查询详情
  const getDataDetail = async () => {
    const { data } = await getDetail(dataId.value)
    dataDetail.value = data
    contactsData.value = data.contacts ? JSON.parse(data.contacts) : contactsData.value
  }

  // 打开
  const onOpen = async (id: string) => {
    dataId.value = id
    await getDataDetail()
    visible.value = true
  }

  defineExpose({ onOpen })
</script>


<style scoped lang="scss">
  fieldset {
    padding: 15px 15px 0 15px;
    margin-bottom: 15px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
  }

  fieldset legend {
    color: rgb(var(--gray-10));
    padding: 2px 5px 2px 5px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
  }
</style>